'use client';

import { Separator } from '@/components/ui/separator';
import useEditorStore from '@/store/use-editor-store';
import {
  BoldIcon,
  ItalicIcon,
  ListTodoIcon,
  MessageSquarePlusIcon,
  PrinterIcon,
  Redo2Icon,
  RemoveFormattingIcon,
  SpellCheckIcon,
  UnderlineIcon,
  Undo2Icon,
} from 'lucide-react';
import type { LucideIcon } from 'lucide-react';

import AlignButton from './align-button';
import FontFamilyButton from './font-family-button';
import FontSizeButton from './font-size-button';
import HeadingLevelButton from './heading-level-button';
import HighlightColorButton from './highlight-button';
import ImageButton from './image-button';
import LineHeightButton from './line-height-button';
import LinkButton from './link-button';
import ListButton from './list-button';
import TextColorButton from './text-color-button';
import ToolbarButton from './toolbar-button';

const Toolbar = () => {
  const { editor } = useEditorStore();

  const sections: {
    label: string;
    icon: LucideIcon;
    onClick: () => void;
    isActive?: boolean;
  }[][] = [
    [
      {
        label: 'Undo',
        icon: Undo2Icon,
        onClick: () => editor?.chain().focus().undo().run(),
        isActive: false,
      },
      {
        label: 'Redo',
        icon: Redo2Icon,
        onClick: () => editor?.chain().focus().redo().run(),
        isActive: false,
      },
      {
        label: 'Print',
        icon: PrinterIcon,
        onClick: () => window.print(),
        isActive: false,
      },
      {
        label: 'Spell Check',
        icon: SpellCheckIcon,
        onClick: () => {
          const current = editor?.view.dom.getAttribute('spellcheck');
          editor?.view.dom.setAttribute('spellcheck', current === 'true' ? 'false' : 'true');
        },
        isActive: false,
      },
    ],
    [
      {
        label: 'Bold',
        icon: BoldIcon,
        onClick: () => editor?.chain().focus().toggleBold().run(),
        isActive: editor?.isActive('bold'),
      },
      {
        label: 'Italic',
        icon: ItalicIcon,
        onClick: () => editor?.chain().focus().toggleItalic().run(),
        isActive: editor?.isActive('italic'),
      },
      {
        label: 'Underline',
        icon: UnderlineIcon,
        onClick: () => editor?.chain().focus().toggleUnderline().run(),
        isActive: editor?.isActive('underline'),
      },
    ],
    [
      {
        label: 'Comment',
        icon: MessageSquarePlusIcon,
        onClick: () => console.log('TODO: Comment'),
        isActive: false,
      },
      {
        label: 'List Todo',
        icon: ListTodoIcon,
        onClick: () => editor?.chain().focus().toggleTaskList().run(),
        isActive: editor?.isActive('taskList'),
      },
      {
        label: 'Remove Formatting',
        icon: RemoveFormattingIcon,
        onClick: () => editor?.chain().focus().unsetAllMarks().run(),
      },
    ],
  ];
  return (
    <div className="bg-[#f1f4f9] px-2.5 py-0.5 rounded-[24px] min-h-[40px] flex items-center gap-x-0.5 overflow-x-auto">
      {sections[0].map((button) => (
        <ToolbarButton key={button.label} icon={button.icon} onClick={button.onClick} isActive={button.isActive} />
      ))}
      <Separator orientation="vertical" className="!h-6 bg-neutral-300" />
      <FontFamilyButton />
      <Separator orientation="vertical" className="!h-6 bg-neutral-300" />
      <HeadingLevelButton />
      <Separator orientation="vertical" className="!h-6 bg-neutral-300" />
      {sections[1].map((button) => (
        <ToolbarButton key={button.label} icon={button.icon} onClick={button.onClick} isActive={button.isActive} />
      ))}
      <TextColorButton />
      <HighlightColorButton />
      <Separator orientation="vertical" className="!h-6 bg-neutral-300" />
      <FontSizeButton />
      <LinkButton />
      <AlignButton />
      <LineHeightButton />
      <ImageButton />
      <ListButton />
      {sections[2].map((button) => (
        <ToolbarButton key={button.label} icon={button.icon} onClick={button.onClick} isActive={button.isActive} />
      ))}
    </div>
  );
};

export default Toolbar;
